<template>
  <div>
    <el-table border :data="BeTakenData" style="width: 100%">
      <el-table-column
        type="selection"
        label="全选"
        width="70"
        align="center"
      />
      <el-table-column
        prop="RequisitionNumber"
        label="申请单号"
        width="180"
        align="center"
      />
      <el-table-column
        prop="HarmfulPart"
        label="危害部位"
        width="180"
        align="center"
      />
      <el-table-column
        prop="ApplicantName"
        label="申请人姓名"
        width="180"
        align="center"
      />
      <el-table-column
        prop="ContactNumber"
        label="联系电话"
        width="180"
        align="center"
      />
      <el-table-column prop="State" label="状态" width="180" align="center">
        <el-link type="warning" :underline="false">进行中</el-link>
      </el-table-column>
      <el-table-column
        prop="ApplicationTime"
        label="申请时间"
        width="180"
        align="center"
      />
      <el-table-column label="操作" align="center">
        <el-button
          type="primary"
          size="small"
          plain
          @click="handleClick1"
        >确认完成</el-button>
        <el-button
          type="primary"
          size="small"
          plain
          @click="handleClick"
        >详情</el-button>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        class="page1"
        background
        layout="prev, pager, next"
        :total="1000"
      />
    </div>
    <Dialog :center-dialog-visible="isActive" @operation="operation" />
    <!-- 查看弹窗 -->
    <el-dialog class="dialog" :visible.sync="showDialogVisible" width="400px">
      <div class="detail">
        <p><span>申请单号:</span> YH00001</p>
        <p><span>危害部位:</span> 室内</p>
        <p><span>申请人姓名:</span> 李少波</p>
        <p><span>联系电话:</span> 18720828369</p>
        <p><span>状态:</span> 待派遣</p>
        <p><span>申请时间:</span> 2021-09-09</p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showDialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ListMixin from '../../mixins/list'
export default {
  mixins: [ListMixin]
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th,
.el-table tr {
  background-color: #eaeaea;
}
::v-deep .el-table__header-wrapper {
  background-color: #eaeaea;
}

.page {
  float: right;
  padding: 20px 0;
}
.detail {
  font-size: 15px;
  p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    margin: 0;
    margin-bottom: 15px;
  }
  span {
    color: rgba(41, 40, 40, 0.884);
  }
}

.detail-img {
  display: flex;
  justify-content: space-between;
  align-items: center;
  p {
    color: rgba(41, 40, 40, 0.884);
  }
}

.dialog {
  padding: 0;
}
</style>
